<template>
    <div class="posts-grid">
        <div v-for="post in posts" :key="post.id" class="post-card">
            <div class="post-header">
                <el-avatar :size="40" :src="post.author.avatar" class="post-avatar">
                    {{ post.author.name.charAt(0) }}
                </el-avatar>
                <div class="post-author">
                    <div class="author-name">{{ post.author.name }}</div>
                    <div class="post-time">{{ post.time }}</div>
                </div>
            </div>
            <div class="post-content">
                {{ post.content }}
            </div>
            <div class="post-actions">
                <el-button text :icon="Star" @click="likePost(post.id)">
                    点赞 {{ post.likes }}
                </el-button>
                <el-button text :icon="ChatDotRound" @click="commentPost(post.id)">
                    评论 {{ post.comments }}
                </el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { Star, ChatDotRound } from '@element-plus/icons-vue'

defineProps({
    posts: {
        type: Array,
        default: () => []
    }
})

const likePost = (postId) => {
    ElMessage.success(`点赞动态: ${postId}`)
}

const commentPost = (postId) => {
    ElMessage.success(`评论动态: ${postId}`)
}
</script>

<style scoped>
.posts-grid {
    display: grid;
    gap: 16px;
}

.post-card {
    border: 1px solid #e4e7ed;
    border-radius: 8px;
    padding: 16px;
    transition: box-shadow 0.3s;
}

.post-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.post-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.post-author {
    flex: 1;
}

.author-name {
    font-weight: 500;
    color: #303133;
}

.post-time {
    font-size: 12px;
    color: #909399;
}

.post-content {
    line-height: 1.6;
    color: #606266;
    margin-bottom: 12px;
}

.post-actions {
    display: flex;
    gap: 16px;
}
</style>